<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="api.css"/>
    <style>
    	*{
    		margin:0px;
    		padding:0px;
    	}
    	body{
    		width:100%;
    		height:100%;
    	}
    	#container{
    		margin-top:200px;
    	}
    	#container li{
    		height: 100px;
    		width: 100%;
    		border-bottom: 1px solid black;	
    		clear:both;
    		list-style:none;
    		margin-bottom:3px;
    	}
    	.info{
    		width: 200px;
    		float: left;
    		height: 100px;
    	}
    	.info img{
    		width: 7.7em;
    	}
    	a{
    		color: black;
    		text-decoration: none;
    	}
    </style>
</head>
<body>
	<div id="container">
		<ul>
			<a href="javascript:alert('(^-^)');">
			<li>
				<div class="info">
					<img src="../image/logo.png" />
				</div>
				<div>
					<p>秀江南武进店装潢</p>
					<p>设计师-董龙文</p>
				</div>
			</li></a>
			<li>
				<div class="info">
					<img src="../image/logo.png" />
				</div>
				<div>
					<p>秀江南武进店装潢</p>
					<p>设计师-董龙文</p>
				</div>
			</li>
			<li>
				<div class="info">
					<img src="../image/logo.png" />
				</div>
				<div>
					<p>秀江南武进店装潢</p>
					<p>设计师-董龙文</p>
				</div>
			</li>
			<li>
				<div class="info">
					<img src="../image/logo.png" />
				</div>
				<div>
					<p>秀江南武进店装潢</p>
					<p>设计师-董龙文</p>
				</div>
			</li>
			<li>
				<div class="info">
					<img src="../image/logo.png" />
				</div>
				<div>
					<p>秀江南武进店装潢</p>
					<p>设计师-董龙文</p>
				</div>
			</li>
			<li>
				<div class="info">
					<img src="../image/logo.png" />
				</div>
				<div>
					<p>秀江南武进店装潢</p>
					<p>设计师-董龙文</p>
				</div>
			</li>
			<li>
				<div class="info">
					<img src="../image/logo.png" />
				</div>
				<div>
					<p>秀江南武进店装潢</p>
					<p>设计师-董龙文</p>
				</div>
			</li>
			<li>
				<div class="info">
					<img src="../image/logo.png" />
				</div>
				<div>
					<p>秀江南武进店装潢</p>
					<p>设计师-董龙文</p>
				</div>
			</li>
		</ul>
	</div>
</body>
<script type="text/javascript" src="api.js"></script>
<script type="text/javascript">
	apiready = function(){
		var slidebar = api.require('UIScrollPicture');
		var paths = ['widget://image/logo.png','widget://image/logo.png','widget://image/logo.png','widget://image/logo.png'];
		var captions = ['装修经纪人1','title2','title3','title4'];
		slidebar.open({
			rect:{
				x:0,
				y:0,
				h:200,
				w:'auto'
			},
			data:{
				paths: paths,
				captions: captions
			},
			styles:{
				caption:{
					height: 35,
		            color: '#E0FFFF',
		            size: 13,
		            bgColor: '#696969',
		            position: 'bottom'
				},
				indicator:{
					align: 'center',
		            color: '#FFFFFF',
		            activeColor: '#DA70D6'
				}
			},
			placeholderImg: './image/logo.png',
			contentMode: 'scaleToFill',
			interval: 2,
			loop: true,
			fixedOn: 'frame2',
    		fixed: true
		},function(ret,err){
			if(ret.status){
				if(ret.eventType == 'click'){
					alert(ret.index);
				}
			}
		});
	};
</script>
</html>